<template>
  <section class='f-pack'>
    <header class="f-header">
      <p>{{currentMeal.title || '--'}} </p>
    </header>

    <section class="f-position">
      <section class="f-card">
        <p class="f-title">
          <img class="f-img01" src="@/assets/icons/icon_date_traffic.png" alt="">
          <span>流量</span>
        </p>
        <ul class="f-cell-box">
          <li>
            <p>套餐内流量</p>
            <p>{{ bytesToSize(currentMeal.total) || '--'}}</p>
          </li>
          <li>
            <p>加油包流量</p>
            <p>{{ bytesToSize(currentMeal.additional) || '--'}}</p>
          </li>
        </ul>
      </section>

      <section class="f-card">
        <p class="f-title">
          <img class="f-img02" src="@/assets/icons/icon_dataplus.png" alt="">
          <span>加油包订购</span>
          <span class="f-tips">（当月有效，月底清零）</span>
        </p>
        <ul class="f-add-pack">
          <li v-for="(item,index) in addiList" :key="index" @click="openPopup(item)">
            <p>{{ item.title || '--'}}</p>
            <p>{{ item.price }}元</p>
          </li>
        </ul>
        <p v-if="!addiList.length" class="f-center">暂无可买加油包</p>
      </section>

      <section class="f-card">
        <p class="f-title">
          <img class="f-img03" src="@/assets/icons/icon_setmeal.png" alt="">
          <span>套餐说明</span>
        </p>
        <div class="f-meal-desc">
          <p v-html="pack_rule"></p>
        </div>
      </section>
    </section>

    <van-popup v-model:show="popup" position="bottom" round class="f-popup" closeable>
      <p class="f-title">订购加油包</p>
      <section class="f-card">
        <p>用户码</p>
        <p class="f-mt-10">
          <span>{{code || '--'}}</span>
        </p>
      </section>

      <section class="f-card">
        <p class="f-card-title">
          <span>加油包内容</span>
          <span style="color: #FF3F3F;">¥{{popupForm.price}}</span>
        </p>
        <div class="f-content">
          <p class="p">{{popupForm.title}}</p>
        </div>
      </section>

      <section class="f-card">
        <p class="f-card-title">
          <span>付款方式</span>
        </p>
        <div class="f-content">
          <van-radio-group v-model="payMethod" shape="dot">
            <van-radio name="wxpay" label-position="left" icon-size="16px">
              <div class="f-pay-box">
                <img src="@/assets/icons/withdraw_icon_wx.png" alt="">
                <p>微信支付</p>
              </div>
            </van-radio>
            <van-radio name="alipay" label-position="left" icon-size="16px" style="margin-top: 15px;">
              <div class="f-pay-box">
                <img src="@/assets/icons/withdraw_icon_zfb.png" alt="">
                <p>支付宝支付</p>
              </div>
            </van-radio>
          </van-radio-group>
        </div>
      </section>

      <div class="f-agreement">
        <van-checkbox v-model="agreeCheck" checked-color="#3366FF" icon-size="16px">
          我已阅读并同意
          <span style="color: #3967D9;">《全讯物联充值协议》</span>
        </van-checkbox>
      </div>

      <div class="f-bottom-box">
        <div class="g-flex-ct f-price">
          <p style="color: #0B0000;font-size: 14px;">合计</p>
          <p class="f-ml-10">¥{{popupForm.price}}</p>
        </div>
        <van-button type="primary" round @click="orderSubmit()">
          <p style="padding: 10px 40px">去支付</p>
        </van-button>
      </div>
    </van-popup>
  </section>
</template>

<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import api from './api';
import { setStore, getStore, errorDeal, bytesToSize } from '@/utils/utils';
import JsBridge from '@/utils/JsBridge.js'

export default {
  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      userInfo: getStore('USER_INFO'),
      code: getStore('CURRENT_CODE').code,
      currentMeal: getStore('CURRENT_MEAL'),
      addiList: [],
      pack_rule: '',

      popup: false,
      popupForm: {},
      payMethod: 'alipay',
      agreeCheck: false,
    })

    onMounted(() => {
      store.commit("setNavBar", {
        title: '套餐详情',
        show: true,
        left: true,
        leftType: 'back',
        right: false,
        rightType: 'search',
        bg: ''
      });

      getListByAddiPack()
      getPackDesc()
    })

    const getListByAddiPack = () => {
      let json = {
        code: state.code,
      }
      api.listByAddiPack(json).then(res => {
        let pack = res.data.pack
        state.addiList = pack.addi ? pack.addi : []
      }).catch(err => {
        state.addiList = []
      })
    }

    const getPackDesc = () => {
      let json = {
        packId: state.currentMeal.packId
      }
      api.packDesc(json).then(res => {
        state.pack_rule = res.data
      })
    }

    // 下单
    const orderSubmit = () => {
      if (!state.agreeCheck) {
        errorDeal("请阅读并同意服务协议")
        return
      }
      let json = {
        code: state.code,
        packId: state.popupForm.pid,
        method: state.payMethod,
        type: 'app', // app调用，sdk：sdk调用
      }
      api.packToPay(json).then(res => {
        // 微信支付
        if (state.payMethod == 'wxpay') {
          JsBridge.callHandler('wxpay', res.data, (res1) => {
            try {
              let data = JSON.parse(res1)
              const { success } = data
              if (success) {
                toOrderDetail(res.data.orderNo)
              } else {
                errorDeal('支付失败！')
              }
            } catch {
              errorDeal('支付失败！')
            }
          })
        }

        // 支付宝支付
        if (state.payMethod == 'alipay') {
          JsBridge.callHandler('alipay', res.data.orderStr, (res1) => {
            try {
              let data = JSON.parse(JSON.parse(res1).msg)
              if (data.alipay_trade_app_pay_response.code == 10000) {
                toOrderDetail(res.data.orderNo)
              } else {
                errorDeal('支付失败！')
              }
            } catch {
              errorDeal('支付失败！')
            }
          })
        }
      })
    }

    const openPopup = (data) => {
      state.popup = true
      state.popupForm = data
    }

    const toOrderDetail = (orderno) => {
      router.push({
        path: '/inChina/rechargeRecordDetail',
        query: {
          orderno
        }
      })
    }

    return {
      ...toRefs(state),
      bytesToSize,
      openPopup,
      orderSubmit,
    }
  }
}
</script>

<style lang='scss' scoped>
.f-pack {
  position: relative;
  z-index: 1;
  .f-header {
    background-image: linear-gradient(to bottom, #bed3fa, #97b4f8, #bed3fa);
    font-weight: 500;
    font-size: 17px;
    color: #000000;
    position: absolute;
    width: 100%;
    z-index: -1;
    padding: 30px 0 126px 14px;
  }
  .f-position {
    z-index: 2;
    margin-left: 13px;
    margin-top: 89px;
    .f-card {
      width: 349px;
      background: #ffffff;
      border-radius: 10px;
      padding: 24px 5px 10px 13px;
      margin-bottom: 15px;
      .f-title {
        display: flex;
        align-items: end;
        font-weight: 500;
        font-size: 16px;
        color: #0b0000;
        .f-tips {
          font-weight: 400;
          font-size: 12px;
          color: #fd6a56;
        }
        .f-img01 {
          width: 19px;
          margin-right: 11px;
        }
        .f-img02 {
          width: 21px;
          margin-right: 11px;
        }
        .f-img03 {
          width: 19px;
          margin-right: 11px;
        }
      }
      .f-cell-box {
        font-weight: 400;
        font-size: 14px;
        color: #666666;
        margin-top: 10px;
        li {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 20px 0;
          p:first-child {
            margin-left: 10px;
          }
          p:last-child {
            font-weight: 500;
            color: #000000;
            margin-right: 10px;
          }
        }
        li:not(:last-child) {
          border-bottom: 1px dashed #aaaaaa;
        }
      }
      .f-add-pack {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 20px 10px;
        margin-top: 26px;
        li {
          width: 100px;
          background: #ffffff;
          border-radius: 7px;
          border: 1px solid #5b2bd6;
          text-align: center;
          p:first-child {
            font-weight: 500;
            font-size: 14px;
            color: #000000;
            margin: 18px 0 15px 0;
          }
          p:last-child {
            height: 26px;
            line-height: 25px;
            background: #5b2bd6;
            border-radius: 0 0 6px 6px;
            font-weight: 400;
            font-size: 13px;
            color: #ffffff;
          }
        }
      }
      .f-meal-desc {
        font-weight: 300;
        font-size: 12px;
        color: #666666;
        margin: 20px 10px 10px 10px;
        line-height: 20px;
      }
    }
  }
  .f-popup {
    .f-title {
      font-weight: 500;
      font-size: 16px;
      color: #000000;
      text-align: center;
      padding: 14px 0 0px 0;
    }
    .f-card {
      width: 347px;
      background: rgba(255, 255, 255, 0.7);
      border-radius: 13px;
      margin: 14px;
      font-weight: 500;
      font-size: 14px;
      color: #0b0000;
      padding: 17px 15px 20px 20px;
      .f-card-title {
        font-weight: 500;
        font-size: 14px;
        color: #0b0000;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .f-content {
        margin-top: 20px;
        font-weight: 400;
        font-size: 12px;
        color: #424242;
        .p {
          height: 20px;
        }
        .f-pay-box {
          display: flex;
          align-items: center;
          font-weight: 400;
          font-size: 14px;
          color: #000000;
          width: 280px;
          img {
            width: 30px;
            height: 30px;
            margin-right: 10px;
          }
        }
      }
    }
    .f-agreement {
      display: flex;
      align-items: center;
      font-weight: 300;
      font-size: 12px;
      color: #424242;
      margin: 12px 24px;
    }
    .f-bottom-box {
      width: 375px;
      background: #ffffff;
      box-shadow: -2px 0px 7px 1px rgba(171, 171, 171, 0.85);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 17px 20px 17px;
      .f-price {
        font-weight: 500;
        font-size: 16px;
        color: #ff3f3f;
      }
    }
  }
}
</style>